<template>
    <div class="P-chart">
        <div><img :src="src" /></div>
        <!-- 复杂饼图 -->
        <div class="P-chartMain" id="f"></div>

        <div class="P-chartMain" id="a"></div>
        <div class="P-chartMain" id="b"></div>

        <!-- 环形图 -->
        <div class="P-chartMain" id="c"></div>

        <!-- 柱状图 -->
        <div class="P-chartMain" id="d"></div>

        <!-- 折线图 -->
        <div class="P-chartMain" id="e"></div>
    </div>
</template>

<script>
import { setTitle } from "@/util";
import * as echarts from "echarts";
import themeJson from "./src/walden.project.js";

export default {
    data: function () {
        return {};
    },
    created() {
        echarts.registerTheme("walden", themeJson);
    },
    mounted() {
        setTitle("图表");
        // 图表，使用定制主题
        let myChart = echarts.init(document.querySelector("#a"), "walden");
        // 在系列中设置数据
        // myChart.setOption({
        //     title: {
        //         text: "Echarts 入门示例",
        //     },
        //     tooltip: {},
        //     // x轴数据
        //     xAxis: {
        //         type: 'category',
        //         // 多柱子，应该是月份了
        //         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        //     },
        //     // y 轴数据
        //     yAxis: {},
        //     series: [
        //         {
        //             name: "销量",
        //             type: "bar",
        //             data: [5, 20, 36, 10, 10, 20],
        //         },
        //         {
        //             name: "利润",
        //             type: "bar",
        //             data: [5, 30, 15, 20, 11, 10],
        //         },
        //         {
        //             name: "成本",
        //             type: "bar",
        //             data: [15, 20, 46, 20, 30, 40],
        //         }
        //     ],
        //     emphasis: {
        //         itemStyle: {
        //             color: 'red'
        //         },
        //         label: {
        //             show: true,
        //             formatter: 'This is a emphasis label.'
        //         }
        //     }
        // });
        // myChart.resize({
        //     width: '100%',
        //     height: 400
        // });
        // 在数据集中设置数据
        // myChart.setOption({
        //     legend: {},
        //     tooltip: {},
        //     dataset: {
        //         // 这个数据可以用对象表示，也可以用数组表示
        //         dimensions: ["product", "2015", "2016", "2017"],
        //         source: [
        //             ["Matcha", 43.3, 85.8, 93.7],
        //             ["Milk", 83.1, 73.4, 55.1],
        //             ["Cheese", 86.4, 65.2, 82.5],
        //             ["Walnut", 72.4, 53.9, 39.1],
        //         ],
        //     },
        //     emphasis: {
        //         label: {
        //             show: true,
        //             // fontSize: 16,
        //             // rotate: 90,
        //             // formatter: '{c} {name|{a}}',
        //             formatter: [
        //                 '{tc|Center Title}{titleBg|}',
        //                 ' Content text xxxx {sunny|} xxxx {cloudy|}',
        //                 '{hr|}',
        //                 'xxx {showers|} xxx'
        //             ].join('\n'),
        //             rich: {
        //                 titleBg: {
        //                     align: 'right',
        //                     backgroundColor: '#000',
        //                     height: 30,
        //                     width: '100%'
        //                 },
        //                 hr: {
        //                     borderColor: '#777',
        //                     borderWidth: 0.5,
        //                     height: 0,
        //                     width: '100%'
        //                 }
        //             }
        //         }
        //     },
        //     xAxis: {type: 'category'},
        //     yAxis: {},
        //     series: [{type: 'bar', barGap: 0},{type: 'bar'},{type: 'bar'}]
        // });
        // 异步加载数据
        // myChart.setOption({
        //     title: {
        //         text: '异步数据加载示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['销量']
        //     },
        //     xAxis: {
        //         data: []
        //     },
        //     yAxis: {},
        //     series: [
        //         {
        //             name: '销量',
        //             type: 'bar',
        //             data: []
        //         }
        //     ]
        // });
        // myChart.showLoading();
        // setTimeout(function(){
        //     myChart.setOption({
        //         xAxis: {
        //             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //         },
        //         series: [
        //             {
        //                 name: '销量',
        //                 data: [5, 20, 36, 10, 10, 20]
        //             }
        //         ]
        //     });
        //     myChart.hideLoading();
        // }, 2000);
        // 饼图
        myChart.setOption({
            // animation: false,
            animationDuration: 1000,
            series: [
                {
                    type: "pie",
                    // 80% 是容器高度的 80%，数组或者数值，都 ok
                    // 数据为 0，则饼图不显示
                    radius: [0, "80%"],
                    roseType: "area",
                    data: [
                        {
                            value: 0.5,
                            name: "A",
                        },
                        {
                            value: 0.2,
                            name: "B",
                        },
                        {
                            value: 0.3,
                            name: "C",
                        },
                    ],
                },
            ],
        });

        let oChart = echarts.init(document.querySelector("#b"), "walden");
        oChart.setOption({
            animationDuration: 500,
            // 如何定制末端显示内容呢？
            series: [
                {
                    type: "pie",
                    // 80% 是容器高度的 80%
                    radius: [0, "80%"],
                    data: [
                        {
                            value: 100,
                            name: "A",
                        },
                        {
                            value: 200,
                            name: "B",
                        },
                        {
                            value: 300,
                            name: "C",
                        },
                    ],
                },
            ],
        });

        console.log("数据开始渲染：");
        function onRendered() {
            window.setTimeout(() => {
                let dataurl = oChart.getDataURL();
                console.log(`dataurl: ${dataurl}`);
                oChart.off("rendered", onRendered);
            }, 1000);
        }

        // 渲染好像并不生效啊？
        oChart.on("rendered", onRendered);

        // 环形图
        let ringChart = echarts.init(document.getElementById("c"));
        ringChart.setOption({
            title: {
                text: "圆环图的例子",
                left: "left",
                top: "top",
            },
            legend: {
                data: ["A", "B", "C", "D", "E"],
            },
            series: [
                {
                    type: "pie",
                    label: {
                        show: false,
                        position: "center",
                        // 高亮的时候展示
                        emphasis: {
                            show: true,
                        },
                    },
                    data: [
                        {
                            value: 443,
                            name: "A",
                        },
                        {
                            value: 564,
                            name: "B",
                        },
                        {
                            value: 375,
                            name: "C",
                        },
                    ],
                    radius: ["30%", "50%"],
                },
                {
                    type: "pie",
                    radius: ["60%", "80%"],
                    data: [
                        {
                            value: 443,
                            name: "A",
                        },
                        {
                            value: 564,
                            name: "B",
                        },
                        {
                            value: 375,
                            name: "C",
                        },
                    ],
                },
            ],
        });
        // 柱状图

        // 多柱、多环，都是往 series 中塞数据
        let barChart = echarts.init(document.getElementById("d"));
        barChart.setOption({
            xAxis: {
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {},
            itemStyle: {
                borderWidth: 2,
            },
            series: [
                // 这个 barWidth 应该根据
                {
                    type: "bar",
                    barWidth: "30%",
                    barGap: "20%",
                    data: [20, 50, 56, 78, 90, 34, 32],
                },
                {
                    type: "bar",
                    // 所占类目宽度
                    barWidth: "20%",
                    data: [20, 50, 56, 78, 90, 34, 32],
                },
            ],
        });

        let lineChart = echarts.init(document.getElementById("e"));
        lineChart.setOption({
            xAxis: {},
            yAxis: {
                data: ["A", "B", "C"],
            },
            lineStyle: {
                color: "green",
                width: 2,
                type: "dashed",
            },
            emphasis: {
                label: {
                    show: true,
                },
            },
            series: [
                {
                    type: "line",
                    // 横线结构  [120, 200, 150]
                    // 横竖结构
                    // [20, 120],
                    //     [30, 200],
                    //     [40, 250],
                    //     [50, 0],
                    //     [60, 250],
                    data: [120, 200, 150],
                    step: "start",
                    areaStyle: {},
                    smooth: true, //平滑曲线图
                },
                {
                    type: "line",
                    data: [110, 310, 230],
                    step: "middle",
                    smooth: true,
                },
            ],
        });
        lineChart.on("click", "yAxis.category", function (params) {
            console.log("获取到数据了：");
            console.log(params);
        });
        //实时排序图

        // 复杂饼图
        let mixPie = echarts.init(document.getElementById("f"));
        mixPie.setOption({
            title: {
                // text: "饼图程序调用高亮示例",
                // left: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{a}<br/>{b} : {c} ({d}%)",
            },
            legend: {
                orient: "horizontal",
                left: "center",
                data: [
                    "直接访问",
                    "邮件营销",
                    "联盟广告",
                    "视频广告",
                    "搜索引擎",
                ],
            },
            series: [
                {
                    name: "访问来源",  //每个项目都有一个名称
                    data: [
                        { value: 335, name: "直接访问" },
                        { value: 310, name: "邮件营销" },
                        { value: 234, name: "联盟广告" },
                        { value: 135, name: "视频广告" },
                        { value: 1548, name: "搜索引擎" }
                    ],
                    center: ['50%', '60%'],
                    radius: ['30%','50%'],
                    type: 'pie'
                },
                {
                    name: "PV",  //每个项目都有一个名称
                    data: [
                        { value: 244, name: "直接访问" },
                        { value: 160, name: "邮件营销" },
                        { value: 778, name: "联盟广告" },
                        { value: 120, name: "视频广告" },
                        { value: 455, name: "搜索引擎" }
                    ],
                    center: ['50%', '60%'],
                    radius: ['60%','80%'],
                    type: 'pie'
                },
            ],
        });
    },
    methods: {
        select(e) {
            let { index } = e.target.dataset;
            if (this.cur === index) return;
            this.cur = index;
            console.log(this.cur);
            this.$router.push(`/cates/${this.cur}`);
        },
    },
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "@/components/common/var.less";

.P-chart {
    width: 100%;
    height: 100%;
    &Main {
        height: 400px;
    }
}
</style>